<template>
    <div class="history"> 
        <h6>历史记录<img src="../assets/img/计时器_timer.png"></h6>
        <ul>
            <li v-for="(item) in arr">
                <router-link to="/detail">
                    <div class="left">
                        <i><img src="../assets/img/play.png"></i>
                        <img :src="item.cover">
                    </div>
                    <div class="right">
                        <h5>《{{ item.title }}》</h5>
                        <div class="a">
                            <span>作者：</span>
                            <span>{{ item.author }}</span>
                        </div>
                        <span>{{ item.description }}</span>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import { history } from '../api/index'

export default {
    data() {
        return {
            arr: [],
        }
    },

    methods: {
        async getHistory() {
            await history()
                .then(
                    content => {
                        console.log("---->", content);
                        let books = content.jsonResponse.data.books;
                        let code = content.jsonResponse.code;
                        if (code === 0) {
                            books.map(item => {
                                let obj = {};
                                obj.title = item.title;
                                obj.cover = item.cover;
                                obj.description = item.description;
                                obj.author = item.author;
                                return obj;
                            })
                            this.arr = books;
                        }
                    }
                )
                .catch(
                    err => {
                        console.log("请求失败，请刷新", err);
                    }
                )
        },

        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
    },

    created() {
        this.getHistory();
    }
}

</script>
<style lang="less" scoped>
@import '../assets/css/varible.less';

.history {
    margin-bottom: 70px;

    h6 {
        padding-left: 10px;
        font-weight: bold;
        font-size: 15px;
        color: @bgColor;
        margin-top: 15px;

        img {
            width: 20px;
            height: 20px;
            margin-left: 5px;
            margin-bottom: 5px;
        }
    }

    ul {
        li {
            padding-left: 5px;
            padding-top: 10px;

            a {
                display: flex;
            }
        }
    }

}

.left {
    position: relative;
    padding-left: 7px;
    padding-top: 2px;

    img {
        width: 85px;
        height: 85px;
        border-radius: 5px;
    }

    i {
        position: absolute;
        bottom: 3px;
        right: 5px;

        img {
            width: 30px;
            height: 30px;

        }
    }
}

.right {
    padding-top: 7px;
    padding-left: 10px;

    div {

        span {
            padding-left: 5px;
            font-weight: lighter;
            font-size: 12px;
            color: black;

        }
    }

    h5 {
        font-size: 15px;
        font-weight: bold;
        font-family: a;
        //   padding-top: 10px;
        // padding-left: 5px;
    }

    span {
        margin-left: 5px;
        font-size: 12px;
        font-weight: bold;
        color: #ccc;

        // 多行文本溢出变省略号
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
</style>